<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"><head>
  <meta charset="utf-8">
  <title>Amusementpark-OS</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
	<script type="text/jscript" th:src="@{/plugin/layui/layui.js}" charset="UTF-8"></script>
	<link rel="stylesheet" th:href="@{/plugin/layui/css/modules/code.css}" media="all">
	<link rel="stylesheet" th:href="@{/plugin/layui/css/modules/layer/default/layer.css}" media="all">
	<script th:src="@{/plugin/vue/axios.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/plugin/vue/vue.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/plugin/jquery.min.js}" charset="utf-8"></script>
</head>
<body>
	<div id="app" class="layui-container" style="margin-top: 30px;">
		<!-- 读取腕带 -->
		<div class="layui-col-md10 layui-bg-gray" style="height: 500px;border:#40AFFE 2px solid ;">
			
<!--			<div class="layui-col-12">-->
<!--				 读取腕带 -->
<!--				<form class="layui-form" action="" method="post" style="margin-top: 20px;">	-->
<!--					&lt;!&ndash; 支付方式 &ndash;&gt;-->
<!--					<div class="layui-form-item">-->
<!--					    <label class="layui-form-label">营业日期</label>-->
<!--					    <div class="layui-input-inline">-->
<!--					    	<select name="city" lay-verify="required" >-->
<!--					    		<option value="">2020年4月22日</option>-->
<!--					    		<option value="1">2020年4月22日</option>-->
<!--					    		<option value="2">2020年4月21日</option>-->
<!--					    	</select>-->
<!--					    </div>-->
<!--					</div>	-->
<!--				</form>-->
<!--			</div>-->

			<!-- 项目明细-内容 -->
			<div class="layui-col-md12 layui-bg-gray" style="overflow-y:auto;height: 500px;border:#40AFFE 2px solid;">
				<!-- 项目明细-标题-->
				<div class="layui-col-md12 layui-bg-blue" style="height: 30px;">
					<div style="margin-top: 5px;margin-left: 5px;">
						未结算腕带列表
					</div>
				</div>
				<table class="layui-table" lay-size="sm" style="">
				  <colgroup>
				    <col width="150">
				    <col width="200">
				    <col>
				  </colgroup>
				  <thead>
				    <tr>
				      <th>序号</th>
					  <th>腕带编号</th>
					  <th>发放时间</th>
					  <th>腕带状态</th>
					  <th>联系方式</th>
					  <th>可用余额</th>
				    </tr> 
				  </thead>
				  <tbody>
				    <tr v-for="item in listWristStrapInfo">
				      <td v-if="item.info_state === 0">{{item.info_id}}</td>
				      <td v-if="item.info_state === 0">{{item.wriststrp_id}}</td>
				      <td v-if="item.info_state === 0">{{item.createtime}}</td>
					  <td v-if="item.info_state === 0">未结算</td>
					  <td v-if="item.info_state === 0">{{item.customer.tel}}</td>
					  <td v-if="item.info_state === 0">{{item.balance}}</td>
				    </tr>
<!--					<tr>-->
<!--					  <td>2</td>-->
<!--					  <td>C2101</td>-->
<!--					  <td>2019-2-11 12:20:24</td>-->
<!--					  <td>未结算</td>-->
<!--					  <td>18812133254</td>-->
<!--					  <td>90</td>-->
<!--					</tr>-->
				  </tbody>
				</table>
			</div>
		</div>
		
		
		<div class="layui-col-md2">
			<div class="layui-col-md12 layui-bg-gray" style="height: 500px;border:#40AFFE 2px solid;">
				<!-- 强制结算功能-标题-->
				<div class="layui-col-md12 layui-bg-blue" style="height: 30px;">
					<div style="margin-top: 5px;margin-left: 5px;">
						强制结算功能
					</div>
				</div>
				<!-- 项目调整原因和金额-标题 -->
<!--				<div class="layui-col-md12 layui-bg-cyan" style="height: 50px;border:#40AFFE 2px solid ;">-->
<!--					<div style="margin:15px 45px 10px">-->
<!--						查询-->
<!--					</div>-->
<!--				</div>-->
				
				<div class="layui-col-md12 layui-bg-green" style="height: 50px;border:#40AFFE 2px solid ;" @click="setStatus">
					<div style="margin:15px 45px 10px">
						强制结算
					</div>
				</div>
				<div class="layui-col-md12 layui-bg-red" style="height: 50px;border:#40AFFE 2px solid ;">
					<div style="margin:15px 45px 10px">
						关闭
					</div>
				</div>
			</div>
		</div>

		<!-- 页脚 -->
		<div class="layui-col-md12 layui-bg-red" style="height: 30px;">
			<!-- 营业时间 -->
			<div id="mytime" class="layui-col-md3" style="margin-top: 5px;margin-left: 10px;">
				<!--营业时间：2020-2-22-->
			</div>
			<!-- 操作用户 -->
			<div class="layui-col-md3" style="margin-top: 5px;">
				操作人员：张三
			</div>
			<!-- 当前时间 -->
			<div id="mytime2" class="layui-col-md5" style="margin-top: 5px;">
				<!--18:55:21-->
			</div>
		</div>
	</div>
	<script th:src="@{/plugin/layui/layui.js}" charset="utf-8"></script>
	<script th:src="@{/plugin/layui/layui.all.js}" charset="utf-8"></script>
	<script>
		// 时间展示
		function showTime() {
			var	nowtime = new Date();
			var	year = nowtime.getFullYear();
			var	month = nowtime.getMonth() + 1;
			var	date = nowtime.getDate();
			$("#mytime").html(year + "年" + month + "月" + date +"日");
			$("#mytime2").html("营业时间：" +nowtime.toLocaleTimeString());
			$("#mytime3").val(year + "-" + month + "-" + date +" " +nowtime.toLocaleTimeString());

		};
		// jQuery加载执行时间展示
		$(function(){
			setInterval("showTime()", 1000);
		})
		var app = new Vue({
			el:"#app",
			data:{
				listWristStrapInfo:[],
			},
			mounted:function(){
				this.getWristStrapInfo();
			},
			methods:{
				getWristStrapInfo:function () {
					var that = this;
					axios.get("[[@{/settlement/listWristStrapInfoByStateIsZero}]]")
							.then(resp=>{
								that.listWristStrapInfo=resp.data.data
							})
				},
				setStatus:function () {
					var that = this;
					axios.get("[[@{/settlement/updateWristStrapInfoState}]]")
							.then(resp=>{
								this.getWristStrapInfo();
							})
				}
			}
		})

	</script>

</body>
</html>